<template>
  <el-input
    :model-value="localValue"
    @input="handleInput"
    @blur="handleBlur"
    @focus="handleFocus"
    :type="inputType"
    :placeholder="placeholder"
    :disabled="disabled"
    :readonly="readonly"
    :clearable="clearable"
    :show-password="showPassword"
    :autocomplete="autocomplete"
    :maxlength="maxlength"
    :minlength="minlength"
    :prefix-icon="prefixIcon"
    :suffix-icon="suffixIcon"
    :validate-event="validateEvent"
    :rows="rows"
    :autosize="autosize"
    :resize="resize"
    :formatter="formatter"
    :parser="parser"
    :name="name"
    :label="label"
    :tabindex="tabindex"
    :accesskey="accesskey"
    :autofocus="autofocus"
    :spellcheck="spellcheck"
    :wrap="wrap"
    :onCompositionstart="onCompositionstart"
    :onCompositionend="onCompositionend"
  />
</template>

<script>
import { ElInput } from 'element-plus'
import { ref, watch, defineComponent } from 'vue'

export default defineComponent({
  name: 'MyInput',
  components: {
    ElInput
  },
  props: {
    // 输入框类型，如 text, password 等
    inputType: {
      type: String,
      default: 'text'
    },
    // 输入框的值
    modelValue: {
      type: [String, Number],
      default: ''
    },
    // 输入框的占位符
    placeholder: {
      type: String,
      default: ''
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否只读
    readonly: {
      type: Boolean,
      default: false
    },
    // 是否可清除
    clearable: {
      type: Boolean,
      default: false
    },
    // 是否显示密码切换按钮
    showPassword: {
      type: Boolean,
      default: false
    },
    // 自动完成属性
    autocomplete: {
      type: String,
      default: 'off'
    },
    // 最大长度
    maxlength: {
      type: Number,
      default: undefined
    },
    // 最小长度
    minlength: {
      type: Number,
      default: undefined
    },
    // 前缀图标
    prefixIcon: {
      type: String,
      default: undefined
    },
    // 后缀图标
    suffixIcon: {
      type: String,
      default: undefined
    },
    // 是否触发验证事件
    validateEvent: {
      type: Boolean,
      default: true
    },
    // 文本域的行数
    rows: {
      type: Number,
      default: 2
    },
    // 文本域是否自动调整大小
    autosize: {
      type: [Boolean, Object],
      default: false
    },
    // 文本域调整大小的方向，如 none, both, horizontal, vertical
    resize: {
      type: String,
      default: 'none'
    },
    // 输入内容格式化函数
    formatter: {
      type: Function,
      default: undefined
    },
    // 输入内容解析函数
    parser: {
      type: Function,
      default: undefined
    },
    // 输入框的名称
    name: {
      type: String,
      default: undefined
    },
    // 输入框的标签
    label: {
      type: String,
      default: undefined
    },
    // 输入框的 tab 索引
    tabindex: {
      type: String,
      default: undefined
    },
    // 访问键
    accesskey: {
      type: String,
      default: undefined
    },
    // 是否自动聚焦
    autofocus: {
      type: Boolean,
      default: false
    },
    // 是否开启拼写检查
    spellcheck: {
      type: Boolean,
      default: false
    },
    // 文本域是否自动换行
    wrap: {
      type: String,
      default: 'soft'
    },
    // 中文输入开始事件处理函数
    onCompositionstart: {
      type: Function,
      default: undefined
    },
    // 中文输入结束事件处理函数
    onCompositionend: {
      type: Function,
      default: undefined
    }
  },
  emits: ['update:modelValue', 'handleInput', 'blur', 'focus'],
  setup(props, { emit }) {
    // 使用一个本地的ref变量来代替直接修改props
    const localValue = ref(props.modelValue)

    // 监听props的变化以更新本地变量
    watch(
      () => props.modelValue,
      (newValue) => {
        localValue.value = newValue
      }
    )
    const handleInput = (value) => {
      localValue.value = value
      emit('update:modelValue', value)
      emit('handleInput', value)
    }
    // 处理失去焦点事件
    const handleBlur = (event) => {
      emit('blur', event)
    }

    // 处理获取焦点事件
    const handleFocus = (event) => {
      emit('focus', event)
    }
    return {
      localValue,
      handleInput,
      handleBlur,
      handleFocus
    }
  }
})
</script>
